<template>
  <div class="position-detail-container">
    <div class="back-link-container">
      <router-link to="/join-us" class="back-link">← 返回加入我们</router-link>
    </div>
    
    <div class="position-detail card">
      <h1>{{ position.title }}</h1>
      
      <div class="position-description">
        <h2>职位描述</h2>
        <p>{{ position.description }}</p>
      </div>
      
      <div class="position-requirements">
        <h2>职位要求</h2>
        <ul>
          <li v-for="(req, index) in position.requirements" :key="index">
            {{ req }}
          </li>
        </ul>
      </div>
      
      <div class="position-benefits">
        <h2>福利待遇</h2>
        <ul>
          <li v-for="(benefit, index) in position.benefits" :key="index">
            {{ benefit }}
          </li>
        </ul>
      </div>
      
      <div class="application-info">
        <h2>申请方式</h2>
        <p>请将您的简历和简短自我介绍发送至：<strong>join@ganqingjieyou.com</strong></p>
        <p class="application-note">邮件主题请注明：申请职位 - {{ position.title }}</p>
      </div>
      
      <div class="contact-section">
        <router-link to="/contact" class="btn btn-primary">联系我们</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PositionDetailView',
  data() {
    // 职位数据
    const positions = {
      'counselor': {
        id: 'counselor',
        title: '心理咨询师',
        description: '作为我们团队的心理咨询师，您将负责为用户提供专业的情感咨询服务，帮助他们解决恋爱、婚姻、家庭等方面的情感困扰。您需要具备专业的心理学知识和丰富的咨询经验，能够提供温暖、专业的心理支持。',
        requirements: [
          '国家心理咨询师资格证书',
          '3年以上心理咨询工作经验',
          '擅长情感关系、婚姻家庭等咨询领域',
          '良好的沟通能力和同理心',
          '能够尊重并保护来访者隐私'
        ],
        benefits: [
          '具有竞争力的薪酬待遇',
          '灵活的工作时间安排',
          '专业培训和个人成长机会',
          '友好、支持性的团队环境',
          '参与有意义的工作，帮助他人改善生活'
        ]
      },
      'advisor': {
        id: 'advisor',
        title: '情感顾问',
        description: '作为情感顾问，您将通过文字形式为用户提供情感建议和支持。您需要热爱倾听和帮助他人，具备良好的沟通能力和情感洞察力，能够用温暖、专业的语言回应用户的情感困惑。',
        requirements: [
          '对情感咨询有浓厚兴趣',
          '优秀的文字表达和沟通能力',
          '能够提供温暖、专业的建议',
          '有耐心，善于倾听和理解他人',
          '了解心理学基础知识优先'
        ],
        benefits: [
          '灵活的工作时间和地点',
          '根据工作量获得相应报酬',
          '提升沟通和情感分析能力',
          '与专业团队共同成长',
          '帮助他人解决情感困扰的满足感'
        ]
      },
      'editor': {
        id: 'editor',
        title: '内容编辑',
        description: '负责情感文章的撰写、编辑和审核工作，确保内容的专业性、准确性和可读性。您需要有扎实的文字功底，对情感话题有深入了解，能够创作出高质量的情感内容。',
        requirements: [
          '中文、新闻、心理学等相关专业',
          '优秀的文字功底和编辑能力',
          '熟悉情感类内容的创作和审核标准',
          '有良好的选题和策划能力',
          '能够独立完成内容创作和编辑工作'
        ],
        benefits: [
          '稳定的工作环境和有竞争力的薪资',
          '发挥创意和写作才华的平台',
          '学习情感心理学知识的机会',
          '与专业团队协作的经验',
          '内容被广泛阅读和认可的成就感'
        ]
      },
      'tech': {
        id: 'tech',
        title: '技术支持',
        description: '负责维护和优化我们的技术平台，提升用户体验。您将参与网站前端和后端的开发与维护工作，确保平台的稳定性和性能，为用户提供流畅的使用体验。',
        requirements: [
          '熟悉前端或后端开发技术',
          '有Web应用开发经验',
          '关注用户体验和产品优化',
          '良好的问题解决能力和团队合作精神',
          '了解Vue.js等现代前端框架优先'
        ],
        benefits: [
          '有竞争力的薪资和福利',
          '使用现代技术栈的机会',
          '参与产品全生命周期的开发',
          '与跨职能团队协作的经验',
          '技术成长和职业发展空间'
        ]
      }
    };
    
    // 获取URL参数中的职位ID
    const positionId = this.$route.params.id;
    // 返回对应职位数据，如果不存在则返回第一个职位
    return {
      position: positions[positionId] || positions.counselor
    };
  }
}
</script>

<style scoped>
.position-detail-container {
  width: 100%;
  padding: 2rem;
}

.back-link-container {
  margin-bottom: 2rem;
}

.back-link {
  color: #ff7e67;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s;
}

.back-link:hover {
  color: #ff5e40;
  text-decoration: underline;
}

.position-detail {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 2.5rem;
  max-width: 800px;
  margin: 0 auto;
}

.position-detail h1 {
  color: #333;
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #ff7e67;
  padding-bottom: 0.8rem;
}

.position-detail h2 {
  color: #444;
  font-size: 1.5rem;
  margin: 2rem 0 1rem;
}

.position-description p {
  line-height: 1.8;
  color: #555;
  margin-bottom: 1.5rem;
}

.position-requirements ul,
.position-benefits ul {
  list-style-type: none;
  padding-left: 0;
}

.position-requirements li,
.position-benefits li {
  padding: 0.8rem 0 0.8rem 1.5rem;
  position: relative;
  line-height: 1.6;
  color: #555;
}

.position-requirements li:before,
.position-benefits li:before {
  content: "•";
  color: #ff7e67;
  font-size: 1.2rem;
  position: absolute;
  left: 0;
  top: 0.9rem;
}

.application-info {
  background-color: #f9f9f9;
  padding: 1.5rem;
  border-radius: 8px;
  margin: 2rem 0;
}

.application-info strong {
  color: #ff7e67;
}

.application-note {
  font-style: italic;
  color: #666;
}

.contact-section {
  text-align: center;
  margin-top: 2rem;
}

.btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-primary {
  background-color: #ff7e67;
  color: white;
}

.btn-primary:hover {
  background-color: #ff5e40;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 126, 103, 0.3);
}

@media (max-width: 768px) {
  .position-detail-container {
    padding: 1rem;
  }
  
  .position-detail {
    padding: 1.5rem;
  }
  
  .position-detail h1 {
    font-size: 1.8rem;
  }
  
  .position-detail h2 {
    font-size: 1.3rem;
  }
}
</style>